{% extends 'layout.html' %}


{% block css %}
    <style>
        .permission-area tr.parent {
            background-color: #cae7fd;;
        }

        .menu-body tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }

    </style>
{% endblock %}

{% block content %}
    <div style="margin: 20px">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading"><i class="fa fa-book"></i> 菜单管理
                    <a href="{% url 'rbac:menu_add' %}" class="btn btn-success btn-sm pull-right "
                       style="padding: 2px 8px;margin: -3px;"> <i
                            class="fa fa-plus"></i> 新建</a>
                </div>

                <!-- Table -->
                <table class="table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>图标</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="menu-body">
                    {% for menu in all_menu %}
                        <tr class=" {% if menu.id|safe == mid %} active {% endif %} ">
                            <td><a href="?mid={{ menu.id }}">{{ menu.title }}</a></td>
                            <td><i class="fa {{ menu.icon }} "></i></td>
                            <td>
                                <a href="{% url 'rbac:menu_edit' menu.id %}"> <i class="fa fa-edit"></i> </a>
                                <a href=""> <i class="fa fa-trash-o"></i> </a>
                            </td>
                        </tr>

                    {% endfor %}

                    </tbody>

                </table>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading"><i class="fa fa-cubes"></i> 权限管理
                    <a href="{% url 'rbac:multi_permissions' %}" class="btn btn-primary btn-sm pull-right "
                       style="padding: 2px 8px;margin: -3px;"> <i class="fa fa-scissors"></i> 批量操作</a>
                    <a href="{% url 'rbac:permission_add' %}" class="btn btn-success btn-sm pull-right "
                       style="padding: 2px 8px;margin: -3px;"> <i class="fa fa-plus"></i> 新建</a>


                </div>

                <!-- Table -->
                <table class="table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>URL</th>
                        <th>URL别名</th>
                        <th>菜单</th>
                        <th>所属菜单</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="permission-area">
                    {% for p_permission in all_permission_dict.values %}
                        <tr class="parent" id="{{ p_permission.id }}">
                            <td class="title">
                                <i class="fa fa-caret-down"></i>
                                {{ p_permission.title }}
                            </td>
                            <td>{{ p_permission.url }}</td>
                            <td>{{ p_permission.name }}</td>
                            <td>
                                是
                            </td>
                            <td>
                                {{ p_permission.menu__title }}
                            </td>

                            <td>
                                <a href="{% url 'rbac:permission_edit' p_permission.id %}"> <i class="fa fa-edit"></i>
                                </a>
                                <a href="{% url 'rbac:permission_del' p_permission.id %}"> <i class="fa fa-trash-o"></i>
                                </a>
                            </td>
                        </tr>
                        {% for c_permission in p_permission.children %}
                            <tr pid="{{ c_permission.parent_id }}">
                                <td>{{ c_permission.title }}</td>
                                <td>{{ c_permission.url }}</td>
                                <td>{{ c_permission.name }}</td>
                                <td></td>
                                <td></td>

                                <td>
                                    <a href="{% url 'rbac:permission_edit' c_permission.id %}"> <i
                                            class="fa fa-edit"></i> </a>
                                    <a href="{% url 'rbac:permission_del' c_permission.id %}"> <i
                                            class="fa fa-trash-o"></i> </a>
                                </td>
                            </tr>
                        {% endfor %}


                    {% endfor %}

                    </tbody>

                </table>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script>


        $('.permission-area').on('click', '.parent .title', function () {
            var caret = $(this).find('i');
            var id = $(this).parent().attr('id');
            if (caret.hasClass('fa-caret-right')) {
                caret.removeClass('fa-caret-right').addClass('fa-caret-down');
                $(this).parent().nextAll('tr[pid="' + id + '"]').removeClass('hide');
            } else {
                caret.removeClass('fa-caret-down').addClass('fa-caret-right');
                $(this).parent().nextAll('tr[pid="' + id + '"]').addClass('hide');

            }
        })


    </script>
{% endblock %}